<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts 可视化分析淘宝双11</title>
    <!-- 引入 echarts.js -->
    <script type="text/javascript" src="js/echarts.min.js"></script>
    <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
    <link type='text/css' href="css/style.css" rel="stylesheet"/>
    <!--    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>-->
    <!--    <script src="https://cdn.bootcss.com/echarts/4.6.0/echarts.min.js"></script>-->
</head>

<body>
<div class='header'>
    <p>ECharts 可视化分析淘宝双11</p>
</div>
<div class="content" style="width: 50%;height: 70%">
    <div class="nav">
        <ul>
            <li><a href="index">所有买家各消费行为对比</a></li>
            <li class="current"><a href="#">男女买家交易对比</a></li>
            <li><a href="index2">男女买家各个年龄段交易对比</a></li>
            <li><a href="index3">商品类别交易额对比</a></li>
            <li><a href="index4">各省份的总成交量对比</a></li>
        </ul>
    </div>
    <div class="container">
        <div class="title">男女买家交易对比</div>
        <div class="show">
            <div class='chart-type'>饼图</div>
            <div id="main"></div>
        </div>
    </div>
</div>
<script>
    //基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));


    // //男女买家交易对比
    var gender = [];
    var nums = [];
    //AJAX接收数据主体
    $.ajax({
        type: "GET",
        url: "/gender",
        dataType: "json",
        async: false,
        success: function (result) {

            for (var i = 0; i < result.length; i++) {
                gender.push(result[i].gender);
                nums.push(result[i].num);
            }
        },
        error: function (errorMsg) {
            alert("获取后台数据失败！");
        }
    });


    // 指定图表的配置项和数据
    var option = {
        backgroundColor: '#2c343c',

        title: {
            text: '男女买家交易对比',
            left: 'center',
            top: 20,
            textStyle: {
                color: '#ccc'
            }
        },

        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },

        visualMap: {
            show: false,
            min: 80,
            max: 600,
            inRange: {
                colorLightness: [0, 1]
            }
        },
        series: [
            {
                name: '消费行为',
                type: 'pie',
                radius: '55%',
                center: ['50%', '50%'],
                data: [
                    {value: nums[0], name: '女性'},
                    {value: nums[1], name: '男性'},
                    {value: nums[2], name: '未知'},
                ].sort(function (a, b) {
                    return a.value - b.value
                }),
                roseType: 'angle',
                label: {
                    normal: {
                        textStyle: {
                            color: 'rgba(255, 255, 255, 0.3)'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        lineStyle: {
                            color: 'rgba(255, 255, 255, 0.3)'
                        },
                        smooth: 0.2,
                        length: 10,
                        length2: 20
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#c23531',
                        shadowBlur: 200,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },

                animationType: 'scale',
                animationEasing: 'elasticOut',
                animationDelay: function (idx) {
                    return Math.random() * 200;
                }
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>
